<div class="p-3 bg-white">
	<h5 style="padding-left: 8px;border-left: 4px solid #00aeff">运营统计</h5>
	<div class="d-flex justify-content-between mt-3">
		<div class="w-100 p-3 text-light" style="background: linear-gradient(-125deg, #57bdbf, #2f9de2)">
			<h6>用户总数</h6>
			<h1>{$count['users']}</h1>
			<p>当前用户总数量</p>
		</div>
		<div class="w-100 p-3 text-light ml-3" style="background: linear-gradient(-125deg, #ff7d7d, #fb2c95)">
			<h6>今日新增</h6>
			<h1>{$count['add_users']}</h1>
			<p>今日新增用户总数</p>
		</div>
		<div class="w-100 p-3 text-light ml-3" style="background: linear-gradient(-113deg, #c543d8, #925cc3)">
			<h6>VIP会员数量</h6>
			<h1>{$count['vip_users']}</h1>
			<p>付费会员数量</p>
		</div>
		<div class="w-100 p-3 text-light ml-3" style="background: linear-gradient(-141deg, #ecca1b, #f39526)">
			<h6>播放记录数</h6>
			<h1>{$count['download_logs']}</h1>
			<p>已完成播放数量</p>
		</div>
	</div>
</div>

<div class="p-3 bg-white mt-3">
	<h5 style="padding-left: 8px;border-left: 4px solid #00aeff">实时数据</h5>
	<div class="d-flex justify-content-between mt-3">
		<div class="d-flex justify-content-between align-items-center w-100">
			<img src="static/images/count-yuan.png" style="width: 60px;height: 60px;">
			<div class="w-100 p-3 ml-3">
				<div class="text-secondary">累计收入</div>
				<h1 class="text-success">{$_G['setting']['recharge_all']}</h1>
				<p class="small text-muted"></p>
			</div>
			<div class="w-100 p-3 ml-5">
				<div class="text-secondary">累计支出</div>
				<h1 class="text-danger">{$_G['setting']['withdraw_all']}</h1>
				<p class="small text-muted">    </p>
			</div>
		</div>
		<div class="d-flex justify-content-between align-items-center w-100">
			<img src="static/images/count-numbers.png" style="width: 60px;height: 60px;">
			<div class="w-100 p-3 ml-3">
				<div class="text-secondary">代理总数</div>
				<h1 class="text-info">{$count['proxy_users']}</h1>
				<p class="small text-muted">站点拥有的代理用户数</p>
			</div>
			<div class="w-100 p-3 ml-5">
				<div class="text-secondary">裂变会员</div>
				<h1 class="text-warning">{$count['fission_users']}</h1>
				<p class="small text-muted">会员裂变数</p>
			</div>
		</div>
	</div>
</div>

<div class="p-3 bg-white mt-3">
	<h5 style="padding-left: 8px;border-left: 4px solid #00aeff">近日交易统计</h5>
	<div id="echarts-trade" class="mt-3 w-100" style="height: 400px;"></div>
</div>
<script type="text/javascript">
	$(function(){
	    var dom = document.getElementById('echarts-trade');
	    $.getScript('static/js/echarts.min.js',function(){
	    	$.getScript('static/js/echarts-walden.js',function(){
			    echarts.init(dom, 'walden').setOption({
			        tooltip: {
			            trigger: 'axis'
			        },
			        legend: {
			            data: ['播放数量', '自助注册会员数']
			        },
			        toolbox: {
			            show: true,
			            showTitle: false,
			            feature: {
			                mark: {show: true},
			                magicType: {show: true, type: ['line', 'bar']}
			            }
			        },
			        calculable: true,
			        xAxis: {
			            type: 'category',
			            boundaryGap: false,
			            data: {$days|raw}
			        },
			        yAxis: {
			            type: 'value'
			        },
			        series: [
			            {
			                name: '播放数量',
			                type: 'line',
			                data: {$logs|raw}
			            },
			            {
			                name: '自助注册会员数',
			                type: 'line',
			                data: {$registers|raw}
			            }
			        ]
			    }, true);
	    	})
	    })
	})
</script>
